<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>订单确认</title>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <!--标准mui.css-->
    <link rel="stylesheet" href="${base!}/assets/front/h5/css/mui.min.css" />
    <link rel="stylesheet" href="${base!}/assets/front/h5/css/hryc.css" />
    <!--App自定义的css-->
    <!--<link rel="stylesheet" type="text/css" href="../css/app.css"/>-->
    <style>
        .mui-table-view .mui-media-object {
            line-height: 42px;
            max-width: 145px;
            height: 100px;
        }
        .jiage-text{
            font-size: 18px;
            color: red;
            margin-right:10px ;
        }
        [v-cloak]{
            display: none !important;
        }
    </style>
</head>
<body >
<div id="order">

    <header class="mui-bar mui-bar-nav top-color">
        <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" style="color: white;"></a>
        <h1 class="mui-title" style="color: white;">
            订单确认
        </h1>
    </header>

    <!--视频单个购买订单-->
  <!--#if(type == "3"){#-->
    <div class="mui-card" style="margin-top: 60px;">
        <div class="mui-card-header" >
            单月价格<span style="color: red;">${monthlyPrice!}</span>
        </div>
        <div class="mui-card-header">
            包月月数<span style="color: red;">${num!}个月</span>
        </div>
        <div class="mui-card-header" >
            <div style="-webkit-user-select:text !important;">积分抵扣:&nbsp<input id="integralNum2" placeholder="" v-on:blur="useIntegral2()"  style="    height: 32px; width: 100px; margin-left: 3px;" value=""></div>
            (剩余积分：{{memberIntegral.useAbleIntegral}})
            <input type="hidden" :value="memberIntegral.useAbleIntegral" id="totalIntegral2">
        </div>
        <!--<div class="mui-card-header">-->
        <!--优惠劵<span style="color: red;">￥10.00</span>-->
        <!--</div>-->
    </div>

    <!--<div class="mui-card">-->
        <!--<div class="mui-card-content">-->
            <!--<ul class="mui-table-view">-->
                <!--<li class="mui-table-view-cell mui-media" >-->
                    <!--<a href="#">-->
                        <!--<img class="mui-media-object mui-pull-left" :src="videoInfo.imageUrl">-->
                        <!--<div class="mui-media-body" style="white-space:normal;" >-->
                            <!--<span>{{videoInfo.videoTitle}}</span>-->
                            <!--<p class='mui-ellipsis'style="margin-top: 35px;margin-left: 100px;" >-->
                                <!--<span class="jiage-text">￥{{videoInfo.price}}</span>-->
                                <!--<span>*1</span>-->
                            <!--</p>-->
                        <!--</div>-->
                    <!--</a>-->
                <!--</li>-->
            <!--</ul>-->
        <!--</div>-->
    <!--</div>-->

    <nav class="mui-bar mui-bar-tab" style="height: 40px;">
        <div class="mui-input-row mui-password" style="border: 0px;">
            <button type="button" id="placeM"  class="mui-btn mui-btn-primary" style="width: 30%;top: 0px;line-height:1;
            border: 0;background-color:red;" v-on:click="saveM()">立即支付</button>
            <button type="button" style="width: 70%;top: 0px;line-height:1;border: 0;background-color:white;"
                    class="mui-btn mui-btn-primary" id="reviewM">
                <span style="color: black;">应付:</span><span style="color: red;padding-left: 10px;" id="payMoney">${payMoney!}元</span>
            </button>
        </div>
    </nav>
    <!--#}else{#-->
    <div class="mui-card" style="margin-top: 60px;">
        <div class="mui-card-header" >
            商品金额<span style="color: red;">￥{{videoInfo.price}}</span>
        </div>
        <div class="mui-card-header" >
            <div style="-webkit-user-select:text !important;">积分抵扣:&nbsp<input id="integralNum" placeholder="" v-on:blur="useIntegral()"  style="height: 32px; width: 100px; margin-left: 3px;-webkit-user-select:text !important" value=""></div>
            (剩余积分：{{memberIntegral.useAbleIntegral}})
            <input type="hidden" :value="memberIntegral.useAbleIntegral" id="totalIntegral">
        </div>
        <div class="mui-card-header">
            <p><span>说明：</span>1积分抵扣1分钱</p>
        </div>
        <div class="mui-card-header" style="display: none">
            运费<span style="color: red;">￥0</span>
        </div>

        <!--<div class="mui-card-header">-->
        <!--优惠劵<span style="color: red;">￥10.00</span>-->
        <!--</div>-->
    </div>

    <div class="mui-card">
        <div class="mui-card-content">
            <ul class="mui-table-view">
                <li class="mui-table-view-cell mui-media" >
                    <a href="#">
                        <img class="mui-media-object mui-pull-left" :src="videoInfo.imageUrl">
                        <div class="mui-media-body" style="white-space:normal;" >
                            <span>{{videoInfo.videoTitle}}</span>
                            <p class='mui-ellipsis'style="margin-top: 35px;margin-left: 100px;" >
                                <span class="jiage-text">￥{{videoInfo.price}}</span>
                                <span>*1</span>
                            </p>
                        </div>
                    </a>
                </li>
            </ul>
        </div>
    </div>

    <div class="mui-content-padded" >
        可用优惠劵
        <select class="mui-btn mui-btn-block" v-model="couponId">
            <option :value="item.couponId" v-for="item in coupons" :key="item.id">
                {{item.sales_coupon!=null?item.sales_coupon.name:'暂无可用优惠劵'}}
            </option>
        </select>
    </div>

    <nav class="mui-bar mui-bar-tab" style="height: 40px;">
        <div class="mui-input-row mui-password" style="border: 0px;">
            <button type="button" id="place"  class="mui-btn mui-btn-primary" style="width: 30%;top: 0px;line-height:1;
            border: 0;background-color:red;" v-on:click="save()">立即支付</button>
            <button type="button" style="width: 70%;top: 0px;line-height:1;border: 0;background-color:white;"
                    class="mui-btn mui-btn-primary" id="review">
                <span style="color: black;">应付:</span><span id="zongPriceSp" style="color: red;padding-left: 10px;">{{zongPrice}}元</span>
            </button>
        </div>
    </nav>
    <!--#}#-->
</div>
<script type="text/javascript" src="${base!}/assets/front/h5/js/mui.js" ></script>
<script type="text/javascript" src="${base!}/assets/front/h5/js/vue.js" ></script>
<script type="text/javascript" src="${base!}/assets/front/h5/js/jquery-2.0.0.min.js" ></script>
<script type="text/javascript" src="${base!}/assets/decorate/pc/decoratecommon/js/layer/mobile/layer.js" ></script>
<script type="application/javascript">
    mui.init({
        swipeBack:true //启用右滑关闭功能
    });

    var videoId = '${videoId}';

    var vue = new Vue({
        el: '#order',
        data: {
            address: '',
            order:'',
            videoInfo:'',
            zongPrice:'',
            zongPrice2:0,
            zongPrice3:'${payMoney!}',
            zongPrice4:'${payMoney!}',
            zongPrice5:0,
            yunPrice:0,
            coupons:[],
            couponId:'',
            couponPrice:0,
            sales_coupon:'',
            memberIntegral:'',
            integralMoney:1
        },
        created:function () {   //实例初始化创建完成执行

            this.getVideoInfo();
            this.getIntegral();


        },
        methods:{              //定义封装方法
            //获取确认视频
            getVideoInfo:function () {
                var self = this;
                $.ajax({
                    type:"POST",
                    url:"${base!}/open/h5/cms/getVideoDesc.html",
                    dataType:"JSON",
                    data:{
                        id:videoId
                    },
                    success:function(data){
                        if (data.code == 0) {
                            self.videoInfo = data.data;
                            self.zongPrice = data.data.price;
                            self.zongPrice2=self.zongPrice;
                            self.getMyOrderCoupon();
                        } else {

                        }
                    }
                });
            },
            //查询可用优惠劵
            getMyOrderCoupon:function () {
                var self = this;
                $.ajax({
                    type:"POST",
                    url:"${base!}/open/h5/coupon/getMyOrderCoupon.html",
                    dataType:"JSON",
                    data:{
                        price:self.zongPrice,
                        productType:"2"
                    },
                    success:function(data){
                        if (data.code == 0) {
                            self.coupons = data.data;
                            if(self.coupons.length>0) {
                                self.couponId = self.coupons[0].couponId; //让select默认选中
                                self.sales_coupon = self.coupons[0].sales_coupon;
                            }else {
                                var d = {};
                                d.couponId = "11111111xxxx";
                                self.coupons[0] = d;
                                self.couponId = self.coupons[0].couponId; //让select默认选中
                            }

                        } else {

                        }
                    }
                });
            },
            useIntegral:function(){
                var integral= $("#integralNum").val();
                var totalIntegral= $("#totalIntegral").val()*1;
                if(integral>totalIntegral){
                    layer.open({
                        content: "可用积分不足!"
                        ,skin: 'msg'
                        ,time: 2 //2秒后自动关闭
                    });
                    $("#integralNum").val(totalIntegral);
                }
                // this.zongPrice=this.zongPrice2;
                if(integral == ""){
                    integral = 0;
                }
                if(integral/(this.integralMoney*1)>=this.zongPrice){
                    layer.open({
                        content: "兑换积分数量不能大于或等于商品总价!"
                        ,skin: 'msg'
                        ,time: 2 //2秒后自动关闭
                    });
                    return;
                }
                if(this.zongPrice5!=0 && this.zongPrice5!=null &&this.zongPrice5!='') {
                    this.zongPrice = this.zongPrice5 - integral / (this.integralMoney * 1);
                }else {
                    this.zongPrice = this.zongPrice - integral / (this.integralMoney * 1);
                }
                this.zongPrice=this.zongPrice.toFixed(2);
            },
            useIntegral2:function(){
                var integral= $("#integralNum2").val();
                var totalIntegral= $("#totalIntegral2").val()*1;
                $("#payMoney").html(this.zongPrice4+"元");
                if(integral>totalIntegral){
                    layer.open({
                        content: "可用积分不足!"
                        ,skin: 'msg'
                        ,time: 2 //2秒后自动关闭
                    });
                    $("#integralNum2").val(totalIntegral);
                }
                this.zongPrice3=this.zongPrice4;
                if(integral/(this.integralMoney*1)>=this.zongPrice4){
                    layer.open({
                        content: "兑换积分数量不能大于或等于商品总价!"
                        ,skin: 'msg'
                        ,time: 2 //2秒后自动关闭
                    });
                    return;
                }
                this.zongPrice3=this.zongPrice3-integral/(this.integralMoney*1);
                this.zongPrice3=this.zongPrice3.toFixed(2);
                $("#payMoney").html(this.zongPrice3+"元");
            },
            //获取可用积分
            getIntegral:function () {
                var self = this;
                $.ajax({
                    type:"POST",
                    url:"${base!}/open/h5/integral/getIntegral.html",
                    dataType:"JSON",
                    data:{

                    },
                    success:function(data){
                        if (data.code == 0) {
                            self.memberIntegral = data.data;
                            self.integralMoney=self.memberIntegral.integralMoney;
                        } else {

                        }
                    }
                });
            },
            //价格计算器
            priceCalculator:function(){
                var self=this;
                var j = self.sales_coupon;
                //满减劵
                if(j.type == '1'){
                    self.zongPrice=self.zongPrice2
                    self.zongPrice = self.zongPrice - j.deductibleAmount;
                    self.zongPrice5 = self.zongPrice;
                    self.useIntegral();
                }
            },
            save:function () {
                var integral = $("#integralNum").val();
                window.location.href="${base!}/open/h5/order/videoCheckoutCounter.html?videoId="+videoId+"&couponId="+this.couponId+"&integralMoney="+integral;
            },
            saveM:function () {
                var integral = $("#integralNum2").val();
                window.location.href="${base!}/open/h5/order/videoCheckoutCounter.html?videoId="+videoId+"&monthlyNum=${num!}"+"&type=3"+"&integralMoney="+integral;
            }
        },
        watch:{     //监听器
            couponId:function () {
                console.log("监听器开始执行：couponId"+this.couponId)
                for(var i=0;i<this.coupons.length;i++){
                    var id = this.coupons[i].sales_coupon.id;
                    console.log("循环id:"+id)
                    if(id == this.couponId){
                        this.sales_coupon = this.coupons[i].sales_coupon;
                    }
                }
                this.priceCalculator();
            }
        }

    });


</script>

</body>
</html>
